<template>
  <div class="container" style="">
    <div class="box">
      <h2>用户登录</h2>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label prop="username">
          <el-input placeholder="请输入手机号" v-model="form.username" />
        </el-form-item>
        <el-form-item label prop="password">
          <el-input placeholder="请输入密码" type="password" v-model="form.password" />
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="onLogin">登录</el-button>
        </el-form-item>
        <el-form-item label>
          <div class="btn-box">
            <el-button type="text" size="small" @click="onRegist">立即注册</el-button>
            <router-link to="/forget" type="text" size="small">忘记密码</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="好货集相关协议" :visible.sync="dialogVisible" width="50%">
      <article>
        <h3>《注册协议》</h3>
        <p>【审慎阅读】您在申请注册流程中点击同意前,应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容，其中包括:</p>
        <p>1、与您约定免除或限制责任的条款；</p>
        <p>2、与您约定法律适用和管辖的条款；</p>
        <p>3、其他以粗体下划线标识的重要条款</p>
        <p>如您对协议有任何疑问，可向平台客服咨询。</p>
        <p>
          【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后,即表示您已充分阅读、理解井接受协议的全部内容。
          如您因平台服务与好货集发生争议的,适用《好货集平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的,依您与其他用户达成的协议处理。
        </p>
        <p style="margin-top:20px">
          <router-link to="p1" target="_blank">
            <h2>《好货集平台服务协议》</h2>
          </router-link>
        </p>
        <p style="margin-top:20px">
          <router-link to="p2" target="_blank">
            <h2>《法律声明及隐私权政策》</h2>
          </router-link>
        </p>
        <p style="margin-top:40px">
          【签约动作】当您按照注册页面提示填写信息，阅读并同意本协议且完成全部注册程序后,即表示您已充分阅读。
          理解并接受本协议的全部内容并与好货集达成一致,成为好货集平台“用户”。
          阅读本协议的过程中,如果您不同意本协议或其中任何条款约定,您应立即停止注册程序。
        </p>
      </article>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSureReigster">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script >
  import { doLogin, doVerifyUser, doLogout } from '../../apis/user';
  import socket from '@/utils/socket.js';
  import ZZToast from '@/utils/toast';
  export default {
    name: 'Login',
    data() {
      return {
        dialogVisible: false,
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入手机号', trigger: 'blur' }, {
              trigger: 'blur',
              validator: (rule, value, callBack) => {
                if (/^[1][0-9]{10}$/.test(value)) callBack();
                else callBack('手机号码不合法');
              }
            }
          ],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        }
      };
    },
    methods: {
      async onLogin() {
        const valid = await this.$refs.form.validate();
        if (!valid) return;
        const res = await doLogin(this.form);
        if (res.code !== 200) {
          ZZToast.warn(res.message);
        } else {
          this.cache.saveToken(res.data.tokenMap.token);
          const user = res.data.member;
          this.cache.saveUser(user);
          this.$router.push('/home');
          socket.init();
        }
      },

      onRegist() {
        this.dialogVisible = true;
      },

      onSureReigster() {
        this.dialogVisible = false;
        this.$router.push('/register');
      }
    },
    async created() {
      const token = this.cache.fetchToken();
      if (!token) {
        doLogout();
      } else {
        const ret = await doVerifyUser(token);
        if (ret) {
          this.$router.replace('/');
        }
      }
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.container {
  background: url(http://121.199.12.118:8083/var/upload/static/login/login.png);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

$space: 20px;
.box {
  position: absolute;
  top: 250px;
  left: 960px;
  h2 {
    text-align: center;
    margin-bottom: $space;
  }
  .el-form {
    width: 400px;
    color: white;
    background: white;
    .el-input,
    .login-btn {
      width: 100%;
    }
    .login-btn {
      margin-top: 12px;
    }
  }
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  a {
    padding-left: 12px;
  }
}

article {
  max-height: 400px;
  overflow-y: auto;
  padding-bottom: 20px;
  p {
    line-height: 24px;
  }
}
</style>
